<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Cfc酒馆争霸赛</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
	<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<style>
		td,.layui-table th{text-align: center;}
		.layui-col-xs2 .layui-input-inline{width: 119px;}
        .layui-col-xs2 input.layui-input{text-align: center;padding-left:0;}
        td{position: relative;}
        .remove{position: absolute;right: 10px;top: 0;bottom:0;margin:auto;border-radius: 22px;width: 22px;height: 22px;background: red;color: #ffffff;cursor: pointer;display: none;}
        .remove1{position: absolute;right: 15px;top: 10px;margin:auto;border-radius: 18px;width: 18px;line-height: 18px;height: 18px;color: #ffffff;cursor: pointer;display: none;}
        tr:hover .remove{display: block;}
        tr:hover .remove1{display: block;}
        [v-clok]{display: none;}
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
		input[type='number']{
			-moz-appearance: textfield;
		}
		.zbs{
			text-align: center;
			margin: 10px;
		}
	</style>
	<div class="layui-main" id="box">
		<div class="layui-row">
			<h1 class="zbs">{{title}}{{jie}}</h1>
	        <table v-clok class="layui-table">
				<colgroup>
					<col width="150">
					<col width="150">
					<col width="150">
					<col width="150">
					<col width="150">
					<col width="150">
					<col width="150">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>NAME</th>
						<th>{{huihe}}一</th>
						<th>{{huihe}}二</th>
						<th>{{huihe}}三</th>
						<th>{{huihe}}四</th>
						<th>{{huihe}}五</th>
						<th>{{huihe}}六</th>
						<th>总计</th>
				</thead>
				<tbody>
					<tr v-for="(x,index) in list">
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.name" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.round1" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.round2" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.round3" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.round4" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.round5" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="number" v-model="x.round6" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								{{parseFloat(x.round1)+parseFloat(x.round2)+parseFloat(x.round3)+parseFloat(x.round4)+parseFloat(x.round5)+parseFloat(x.round6)}}
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script>
		layui.define(['jquery', 'layer'], function(exports){
			var $ = layui.$,
			layer = layui.layer;
		});
		var app3 = new Vue({
		    el: '#box',
		    data: function(){
		    	return {
					title:"斗寿棋王争霸赛",
					jie:"(第一届)",
					huihe:'Round ',
					list:[
						{name:'1',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'2',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'3',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'4',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'5',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'6',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'7',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
						{name:'8',round1:0,round2:0,round3:0,round4:0,round5:0,round6:0,total:0},
					],
				}
		    },
		    watch: {
			},
            methods: {
			},
			computed: {
			}
		})
	</script>
</body>
</html>